<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" title="申请售后" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-mg-20 dfj-bg-white dfj-flex dfj-flex-ai-c dfj-pd-20">
			<view><image style="width: 150rpx;height: 150rpx;" :src="salesItem.iconUrl"></image></view>
			<view class="dfj-flex-1 dfj-t-333 dfj-mg-l-30">
				<view class="">{{ salesItem.productTitle }}</view>
				<view class="dfj-mg-t-30 dfj-t-danger">￥{{ salesItem.totalPrice }}</view>
			</view>
		</view>
		
		<view class="dfj-mg-20 dfj-bg-white">
			<view class="dfj-bd-b-e1e dfj-pd-20">
				<textarea v-model="form.description" placeholder="请描述申请售后的具体原因"/>
			</view>
			<view class="dfj-overflow-hide dfj-pd-20">
				<block v-for="(item,index) in form.imgUrls">
					<view class="sales-item-img">
						<image :src="item"></image>
					</view>
				</block>
				<block v-if="form.imgUrls.length<=5">
					<view class="sales-item-upload" @click="upload">
						<image src="/static/img/my/upload.png" style="width: 50rpx;height: auto;margin-top: 30rpx;" mode="widthFix"></image>
						<view class="dfj-t-333">上传凭证</view>
						<view class="dfj-t-999">(最多5张)</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="dfj-pd-tb-50 dfj-pd-lr-20">
			<button type="primary" @click="postAfter()">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					orderId: '',
					productId: '',
					description: '',
					imgUrls: []
				},
				loginInfo: '',
				salesItem: ''
			}
		},
		onLoad() {
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
			this.salesItem = JSON.parse(sessionStorage.getItem('salesItem'));
			this.form.orderId = this.salesItem.orderId;
			this.form.productId = this.salesItem.productId;
		},
		methods:{
			leftBack() {
				uni.navigateBack();
			},
			postAfter() {
				if(this.form.description == ''){
					uni.showToast({
						title: '请输入具体原因'
					})
					setTimeout(()=>{
						uni.hideToast();
					},1000)
					return false;
				}
				this.$http({
					url: '/order/applyAfterSales',
					data: this.form,
					dataType: 'json'
				}).then(res=> {
					console.log(res)
					if(res.flag){
						uni.showToast({
							title: '申请售后成功'
						})
						uni.navigateBack()
					}
				})
			},
			upload() {
				uni.chooseImage({
				    success: (chooseImageRes) => {
						//console.log(chooseImageRes)
				        const tempFiles = chooseImageRes.tempFiles[0];
						
						uni.uploadFile({
							url: '/shopStreet/userOpt/uploadImg',
							file: tempFiles,
							name: 'file',
							header: {
								'ssToken': this.loginInfo.token
							},
							success:(res)=>{
								let data = JSON.parse(res.data)
								if(!data.flag){
									uni.showToast({
										title: data.msg,
										icon: 'none'
									})
									return false;
								}
								this.form.imgUrls.push(data.data)
							},
							fail:(err)=>{
								console.log("失败")
								console.log(err)
							}
						})
						
						
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sales-item-img{
		display: inline-block;
		width: 150rpx;
		height: 150rpx;
		vertical-align: top;
		border: 1px solid #ccc;
		margin-right: 20rpx;
		image{
			width: 150rpx;
			height: 150rpx!important;
		}
	}
	.sales-item-upload{
		display: inline-block;
		width: 150rpx;
		height: 150rpx;
		vertical-align: top;
		font-size: 20rpx;
		border: 1px solid #ccc;
		text-align: center;
	}
</style>
